<template>
  <div class="fl">
    <main class="animated bounceInRight">
      <div class="cent">关于</div>
      <img src="../../public/image/testimonial-bg.jpg" alt="玫瑰" width="1519px" class="lbt" />
    </main>
    <div class="container animated bounceInLeft">
      <div class="box">
        <img src="../../public/picture/about-2.jpg" alt="" width="1173px" height="751px" />
        <div class="fl-top">
          <p style="text-align:center">
            忆花谷以先进的技术和完善的服务体系，实现24小时网上订花服务,服务全国600多个城市<br>
            2小时即可送货上门。XX花店目前在全国建立了完善的配送服务网络：直辖市、省会城市、大中型城市及国内大多数县级以上城市<br>
            都建立了分支加盟连锁机构。真正实现：全国连锁、千里真情、瞬间传递！无论您身在何时，只要您轻点鼠标，您的爱，您的情感将会穿越时空、跨越地域<br>
            原汁原味的传递到他（她）的身边。因为网络，家人、朋友之间不再有距离，因为公主花店，<br>
            为您和家人、朋友之间架起了一座桥梁！相信我们会做到更好！
          </p>
          <img src="../../public/picture/signature.png" alt="" width="189px" height="82px" />
        </div>
        <div class="center">
          <div v-for="(item, index) of fl" :key="index">
            <img :src="item.img" alt="" width="77px" height="52px" />
            <p>{{item.bt}}</p>
            <p>{{item.article}}</p>
          </div>
        </div>
        <div class="footer" v-show="false">
          内容暂定
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
  main {
    position: relative;

    .cent {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: #222222;
      font-size: 42px;
      font-family: "Lora", serif;
    }
  }

  .container {
    height: 1800px;
    padding: 0 12px;

    .box {
      width: 1176px;
      height: 752px;
      margin: 0 auto;

      .fl-top {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 14px;
        flex-direction: column;
      }

      .center {
        height: 376px;
        display: flex;
        justify-content: space-between;
        padding: 70px 0 100px;
        flex-wrap: nowrap;

        div {
          display: flex;
          flex-flow: wrap column;
          align-items: center;
        }
      }

      .footer {
        height: 396px;
        padding: 90px 0 95px 0;
        background-color: antiquewhite;
        justify-content: center;
        align-items: center;
        text-align: center;
      }

    }
  }
</style>
<script>
  export default {
    data() {
      return {
        fl: [{
            img: "picture/Creative-Design.png",
            bt: "介绍",
            article: "店中的花卉让你大饱眼福，首先跳入你眼帘的是一些高脚架，架上插满了奇花异草，如孔雀毛、万年青、榕树等。",
          },
          {
            img: "picture/Creative-Design.png",
            bt: "关于",
            article: "，有时还在水晶器上端种花卉，下端养一些小鱼，喻示生活的多姿多彩，浪漫中生机盎然。",
          },
          {
            img: "picture/Creative-Design.png",
            bt: "介绍",
            article: "在花架两边的的支架上分别陈列着生命力极强的一些袖珍植物，只要你走过去一瞧，这些小生命一定会让你爱不释手",
          },
        ],
      };
    },
  };
</script>